<template>
    <div id="app">
        <div class="content">
            <dialog-box :currentUser="currentUser"></dialog-box>
            <user-list :userList='userList' @chooseUser="chooseUser"></user-list>
        </div>
    </div>
</template>

<script>
    // import HelloWorld from './components/HelloWorld.vue'
    import DialogBox from "./components/DialogBox"
    import UserList from "./components/UserList"

    export default {
        name: "App",
        components: {
            DialogBox,
            UserList
        },
        data() {
            return {
                msg: "消息",
                userList: [
                    {
                        userName: "小明",
                        photo: require("./assets/img/1.jpg")
                    }, {
                        userName: "张三",
                        photo: require("./assets/img/2.jpg")
                    }, {
                        userName: "李四",
                        photo: require("./assets/img/3.jpg")
                    }
                ],
                currentUser: {}
            }
        },
        methods: {
            chooseUser(index) {
                this.currentUser = this.userList[index]
            }
        }
    }
</script>

<style scoped>
    .content {
        width: 800px;
        height: 600px;
        display: flex;
    }
</style>
